.evaluation {
    width: 100%;
    height: 100%;
    // background-color: #ffffff;

    .form-box{
        background-color: #fff;

        .slider{
            height: 87vh !important;
        }
        
        li>div{
            position: relative;
        }

        h3{
            color: #000;
            padding: 10px;
            border-bottom: 1px solid #ddd;
            margin: 0;
            font-size: 16px;

            span.circular{
                display: inline-block;
                width: 26px;
                height: 26px;
                border-radius: 100%;
                background-color: #6BA7FD;
                color: #fff;
                text-align: center;
                line-height: 26px;
                margin-right: 6px;
                font-size: 14px;
            }
        }

        .option-btn{
            height: calc(100vh - 41px - 30px - 47px);
        }
    }

    .select-block{
        display: inline-block;
        width: 40px;
        height: 40px;
        background: url("../../assets/img/tips.png") no-repeat 0px 0px;
        background-size: 100% 100%; 
        border-radius: 100%;
        position: fixed;
        bottom: 10%;
        right: 10%;
        z-index: 999;

        &:active{
            border: 1px solid red;
        }
    }

    div.select-box{
        width: 100vw;
        height: 100vh; 
        position: fixed;
        top: 0%;
        left: 0;
        right: 0;
        margin: auto; 
        z-index: -1;

        &.show{
            display: block;
            animation: show 1s; 
            opacity: 1;
            z-index: 2;
            @keyframes show {
                0%{
                    opacity: 0;
                }
    
                100%{
                    opacity: 1;
                    z-index: 2;
                }
            }
        } 

        &.hide{
            display: none;
            animation: hide 1s;  
            opacity: 0;
            z-index: -1;
            @keyframes hide {
                0%{
                    opacity: 1;
                    z-index: 2;
                }
    
                100%{
                    opacity: 0;
                    z-index: -1;
                }
            }
        } 

        &>.option-box{
            width: 80%;
            height: 72%;
            overflow: auto;
            background: #fff;
            margin: auto;
            border-radius: 6px;
            position: absolute;
            left: 0;
            right: 0;
            top: 10%;
            z-index: 9; 
            padding: 4%;

            .option-box-tit{
                font-size: 16px;
                height: 36px;
                line-height: 36px;
                border-bottom:1px solid #ddd;
            }

            .option-box-body{
                padding: 2% 4%; 
                text-align: center;
                margin: auto;
            }

            span{
                display: inline-block;
                width: 30px;
                height: 30px;
                line-height: 28px;
                text-align: center;
                border: 1px solid #000;
                border-radius: 100%;
                color: #000;
                font-size: 14px;
                font-weight: bold;
                margin: 3.8%;

                &.active{
                    color: #fff;
                    border: 1px solid #6BA7FD;
                    background-color: #6BA7FD;
                }
            }
        }

        &>.select-box-bg{
            width: 100%;
            height: 100%; 
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: auto;
            z-index: 1;
            background: rgba(0,0,0,0.4);
        }  
    }
}

// 右侧气泡框
.evaluation-navRight-popover{
  
    .am-popover-inner{
        background-color: transparent;
    
        .am-popover-inner-wrapper {
            position: relative;
            overflow: hidden;
            padding: 24px 20px;
            margin: auto;

            .am-popover-item{
                float: left;
                display: inline-block;
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;

                .am-popover-item-container{
                    padding: 0;
                    display: initial;
                    text-align: center;

                    &::before{
                        background-color: transparent;
                    }
                }
            }
        }
    }
}